<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>图片捕获</title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link rel="stylesheet" href="../styles/css/index.css">
  <link rel="stylesheet" href="../lib/swiper/css/swiper.css">
  <style type="text/css">
    html,
    body {
      height: calc(100% - 2px);
      width: 100%;
    }

    .sanjiao {
      border: 7px solid red;
      width: 0;
      height: 0;
      border-top-color: transparent;
      border-left-color: transparent;
      border-bottom-color: transparent;
      position: absolute;
      top: 33%;
      right: 0px;
      cursor: pointer;
    }
    .swiper-container {
      width: 800px;
      height: 500px;
      padding-bottom: 120px;
    }
    .swiper_outer{
      background-color: #f2f2f2;
      padding: 80px 0 50px;
    }
    .news-slider__arrow {
      background: #fff;
      border: none;
      display: inline-flex;
      width: 50px;
      height: 50px;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0px 16px 6px rgba(0, 0, 0, 0.25);
      border-radius: 50%;
      position: absolute;
      top: 540px;
      z-index: 12;
      cursor: pointer;
      outline: none !important;
    }
    .swiper-container-horizontal>.swiper-scrollbar {
      height: 15px;
    }

    .icon {
      display: inline-block;
      width: 1.5em;
      height: 1.5em;
      stroke-width: 0;
      stroke: currentColor;
      fill: currentColor;
      color: rgba(0, 0, 0, 0.5);
    }
    .swiper-button-next{
      right: 250px;
    }
    .swiper-button-prev{
      left: 250px;
    }
    .swiper-slide{
      background: #ccc;
    }
    .rotate{
      transform: rotate(180deg);
    }
    .playbtn{
      left: 375px;
      top:520px;
    }
    .circle {
      height: 50px;
      position: absolute;
      width: 50px;
    }
    .circle_inner_play {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 0 10px 20px;
      border-color: transparent transparent transparent rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -10px 0 0 -7px;

    }
    .circle_inner_pause{
      height: 25px;
      margin-top: 13PX;
      margin-left: 13px;
      border-style: double;
      border-width: 0px 0px 0px 22px;
      border-color: rgba(0, 0, 0, 0.5);
    }
  </style>
</head>

<body>
  <div class="headTitle">
    图片捕获
  </div>
  <div class="sideListout">
    <div class="leftBox">
      <div id="test1"></div>
      <div class="hidden">
        <div class="sanjiao" state="false"></div>
      </div>
    </div>
    <div class="rightBox">
      <div class="swiper_outer" >
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
            <div class="swiper-slide">Slide 11</div>
            <div class="swiper-slide">Slide 13</div>
            <div class="swiper-slide">Slide 14</div>
            <div class="swiper-slide">Slide 15</div>
            <div class="swiper-slide">Slide 16</div>
            <div class="swiper-slide">Slide 17</div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev news-slider__arrow">
            <span class="icon-font">
             <svg class="icon icon-arrow-left">
              <use xlink:href="#icon-arrow-left">
              <svg id="icon-arrow-left" viewBox="0 0 32 32" width="100%" height="100%">
                <title>arrow-left</title>
                <path d="M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z"></path>
              </svg>
              </use>
             </svg>
            </span>
          </div>
          <div class="swiper-button-next news-slider__arrow">
            <span class="icon-font">
             <svg class="icon icon-arrow-left rotate">
              <use xlink:href="#icon-arrow-left">
              <svg id="icon-arrow-right" viewBox="0 0 32 32" width="100%" height="100%">
                <title>arrow-right</title>
                <path d="M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z"></path>
              </svg>
              </use>
             </svg>
            </span>
          </div>
          <div class="playbtn news-slider__arrow">
            <div  class="circle">
              <div id="playBtn" class="circle_inner_play">
              </div>
            </div>
          </div>
          <!-- 如果需要滚动条 -->
          <div class="swiper-scrollbar"></div>
        </div>
      </div>
    </div>
  </div>
  <script src="../lib/layui/layui.js"></script>
  <script src="../lib/JQuery.js"></script>
  <script src="../js/index.js"></script>
  <script src="../lib/swiper/js/swiper.js"></script>
  <script>
    // 使用一个树
    layui.use(['tree', 'util'], function () {
      var tree = layui.tree,
        layer = layui.layer,
        util = layui.util,
        // 树的数据
        nodes = [{
          title: '江西',
          id: 1,
          children: [{
            title: '南昌',
            id: 1000,
            children: [{
              title: '青山湖区',
              id: 10001
            }, {
              title: '高新区',
              id: 10002
            }]
          }, {
            title: '九江',
            id: 1001
          }, {
            title: '赣州',
            id: 1002
          }]
        }, {
          title: '广西',
          id: 2,
          children: [{
            title: '南宁',
            id: 2000
          }, {
            title: '桂林',
            id: 2001
          }]
        }, {
          title: '陕西',
          id: 3,
          children: [{
            title: '西安',
            id: 3000
          }, {
            title: '延安',
            id: 3001
          }]
        }]
      tree.render({
        elem: '#test1',
        data: nodes,
        showCheckbox: true,
        oncheck: function (obj) { //勾选时触发获取勾选数据
          alert(obj)
        },
        showLine: false, //是否开启连接线
        click: function (d) { // 点击分支回调
          treeData = d.data.id
        },
      });

    });

    //轮播图代码
    $(function () {
        var mySwiper = new Swiper('.swiper-container',{
            speed:2000,
            autoplay: true,
            scrollbar:'.swiper-scrollbar',
            scrollbarHide : false,
            scrollbarDraggable : true ,
            scrollbarSnapOnRelease : true ,
            // 如果需要前进后退按钮
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev'
        });
        $('.playbtn').on('click',function(){
            if(mySwiper.autoplaying==true){
                mySwiper.stopAutoplay();
                $('#playBtn').addClass('circle_inner_pause');
                $('#playBtn').removeClass('circle_inner_play');
            }else{
                mySwiper.startAutoplay();
                $('#playBtn').removeClass('circle_inner_pause');
                $('#playBtn').addClass('circle_inner_play');
            }

        })

    })


  </script>
</body>

</html>